<template>
  <div class="my-designer-config">
    <page-config v-if="!selectedComp"></page-config>
    <div v-else class="config-manager-page">
      <n-tabs type="line" justify-content="space-evenly" size="small" class="config-manager_tabs">
        <n-tab-pane name="配置">
          <template #tab>
            配置
          </template>
          <setting-panel></setting-panel>
        </n-tab-pane>
        <n-tab-pane name="数据">
          <template #tab>
            数据
          </template>
          <data-center-panel></data-center-panel>
        </n-tab-pane>
        <n-tab-pane name="交互">
          <template #tab>
            交互
          </template>
          <interaction-panel></interaction-panel>
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>

<script>
import PageConfig from "./page-config/page-config.vue";
import { computed, defineComponent, onMounted, provide } from "vue";
// import { NTabPane, NTabs, } from "naive-ui";
import { loadAsyncComponent } from "../../../utils/async-component";
import { useStore } from "vuex";

export default defineComponent({
  name: "design-config",
  components: {
    // NTabs, NTabPane,
    InteractionPanel: loadAsyncComponent(() => import("./interaction-panel/index.vue")),
    DataCenterPanel: loadAsyncComponent(() => import("./data-center-panel/index.vue")),
    SettingPanel: loadAsyncComponent(() => import("./setting-panel/index.vue")),
    PageConfig
  },
  setup() {
    const store = useStore();
    const selectedComp = computed(() => store.getters["design/selectedComp"]);
    provide("com", selectedComp);
    onMounted(() => {
    });
    return {
      selectedComp
    };
  }
});
</script>

<style lang="less" scoped>
.config-manager-page {
  overflow: hidden;

  .config-manager_tabs {
    :deep(.n-tabs-tab-wrapper) {
      flex: 1;
      display: block;
      cursor: pointer;

      .n-tabs-tab {
        width: 100%;
        text-align: center;

        .n-tabs-tab__label {
          text-align: center;
          width: 100%;
          display: inline-block;

          .config-manager-tabs_title {
            padding: 0 6px;
            font-size: 12px;
            font-weight: bolder;
          }
        }
      }
    }
  }
}
</style>